<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>彩票报告</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <link rel="stylesheet" href="../fonts/iconfont.css" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
      overflow-x: hidden;
    }
    /**/
    .formDiv{

      background-color: white;
    }
    .formDiv p{
      margin: 0;
      padding: 0;
      font-size: 0.24rem;
      color:black;
    }
    .formDiv>div{
      width:100%;
      overflow: hidden;
      padding: 0.1rem 4% 0.1rem 0;
    }
    .floatLeft{
      float: left;
    }

    .textLeft{
      text-align: left;
    }
    .textRight{
      text-align: right;
    }
    .userList{
      width: 100%;
      padding:0 0.1rem;
      background-color: white;
    }
    .userList>div{
      width: 100%;
      overflow: hidden;
      padding:  0.1rem;
      border-bottom: 1px solid #A6AFAE ;
    }
    .userInfo>div p{
      float: left;
      width: 33.33%;
      margin: 0;
      font-size: 0.2rem;
      padding: 0;
    }
    .userImg{
      width:0.8rem;
      height: 0.8rem;
      border-radius: 0.4rem;
      margin-right: 0.1rem;
      overflow: hidden;
    }
    .userInfo{
      width: 5rem;
    }
    .userImg img{
      width: 0.8rem;
    }

    .mui-scroll-wrapper {
      bottom: 40px;
    }
    .bglight{
      background-color: #EEEEEE
    }




  </style>
</head>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>

<body>
<div id="app" class="mui-content">
  <!--<div class="mask" v-show="isInit">加载中...</div>-->
  <div class="mui-scroll-wrapper">
    <div class="mui-scroll" >
      <div class="formDiv"  >
        <div style=" background-color: #F4F4F4">
          <div class="floatLeft  textLeft" style="width: 40%;position: relative">
            <img  style="width: 0.35rem;position: absolute;top:0.02rem;"  src="../images/caipiao.png" alt="">
            <span style="font-size: 0.26rem;margin-left: 0.35rem"> <strong>{{totalInfo.ticketName}}</strong> </span>
          </div>
          <p  class="floatLeft  textRight" style="width: 20%;font-size: 0.26rem">{{totalInfo.peopleNum}}人</p>
          <p  class="floatLeft  textRight"  style="width: 40%;font-size: 0.26rem">{{totalInfo.scoreNum}}分</p>
        </div>

      </div>
      <div class="userList">
        <!--:class="{bglight:index%2===1}"-->
        <div v-show="list.length !==0" v-for="(item,index) in list"  >
          <div class="userImg floatLeft">
            <img src="../images/defaultPhoto.png" alt="">
          </div>
          <div class="userInfo floatLeft">
            <div>
              <p class="userName">{{item.userName}}</p>
              <p style="text-align: center">{{item.groupName}}</p>
              <p  class="textRight">{{new Date(item.logTime).format('yyyy-MM-dd')}}</p>
            </div>
            <div>
              <p style="color:black">{{item.type === 1 ? 'ID' : '卡号' }}：{{item.userId}}</p>
              <p style="text-align: center">+{{item.scoreCount}}分x{{item.groupCount}}</p>
              <p class="textRight">{{new Date(item.logTime).format('hh:mm:ss')}}</p>
            </div>

          </div>
        </div>
        <p v-show="list.length === 0" style="width: 100%;text-align: center">暂无数据</p>
      </div>
    </div>

  </div>



</div>
<!---->
<script src="../config.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        currentShopObj:'',
        ticketId:'',
        pageNo:1,
        pageCount:20,
        fromTime:0,
        endTime:0,
        list: [ ] ,
        totalInfo:'',
        isInit: true,
        isLoading:false,
        pageTotal:'',
      }
    },
    created: function() {
      var vm = this
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()

      })
    },
    mounted:function(){
      this.bindEvent()
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.ticketId = sf.ticketId;
        this.fromTime = sf.fromTime;
        this.endTime = sf.endTime;
        this.totalInfo = sf.totalInfo;
        this.localData()
      },
      localData: function() {
        var  vm=this;
        this.isLoading = true;
        var  data={
          "storeId":vm.currentShopObj.storeId,
          "fromTime": new Date(vm.fromTime + ' 00:00:00').getTime() ,
          "endTime":new Date(vm.endTime + " 23:59:59").getTime(),
          "pageNo":vm.pageNo,
          "pageCount":vm.pageCount,
          "ticketId":vm.ticketId
        }
        console.log(JSON.stringify(data))
        config.ajax({
          url:'/scores/getItemUserFlows',
          data: {
            "storeId":vm.currentShopObj.storeId,
            "fromTime": new Date(vm.fromTime+ ' 00:00:00').getTime() ,
            "endTime":new Date(vm.endTime+ ' 23:59:59').getTime(),
            "pageNo":vm.pageNo,
            "pageCount":vm.pageCount,
            "ticketId":vm.ticketId
          },
          success: function(res) {
            if(res.result===1){
              console.log('data:'+JSON.stringify(res));
              vm.pageTotal=Math.ceil(res.itemTicketUsers.totalCount/vm.pageCount);
              vm.pageNo=res.itemTicketUsers.pageNo;
              vm.pageCount=res.itemTicketUsers.pageCount;
              if(vm.pageNo ===1){
                vm.list= res.itemTicketUsers.itemTicketUsers
              }else if(vm.pageNo >1){
                vm.list=(vm.list).concat(res.itemTicketUsers.itemTicketUsers)
              }
            }
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          },
          error:function(res){
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          }
        });
      },
      bindEvent:function(){
        var  vm=this;
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
        //滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function (e) {
          if (e.detail.y <= e.detail.maxScrollY) {
            if (vm.isLoading === false) {
              vm.pageNo +=1;
              if (vm.pageNo <= vm.pageTotal) {
//                  vm.loadingText = '加载中...';
                vm.localData();
              } else {
                vm.pageNo=vm.pageTotal;
                mui.toast('没有更多');
              }
            }
          };

        });
      }




    },

  })
</script>
</body>

</html>